<template>
  <div class="dragDiv">
    <!-- <span style="display:inline-block;margin-bottom:10px;font-size:16px">完成拼图验证</span> -->
    <a-icon type="close" @click="handleClose" />
    <div class="header">
      <p>完成拼图验证</p>
      <!-- <i @click="handleClick"><a-icon type="undo" /> 换一张</i> -->
    </div>
    <slide-verify
      :l="42"
      :r="10"
      :w="300"
      :h="170"
      ref="block"
      :imgs="loginBackImageArr"
      slider-text="向右滑动完成拼图"
      accuracy="1"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  </div>
</template>
<script setup lang="ts">
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
const loginBackImageArr = ref<any>([]);
const msg = ref("");
// const verifyRef = ref();
// let emit = defineEmits();
const block = ref();
const onAgain = () => {
  msg.value = "检测到非人为操作的哦！ try again";
  // 刷新
  block.value?.refresh();
};

const onSuccess = (times: number) => {
  msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
};

const onFail = () => {
  msg.value = "验证不通过";
};

const onRefresh = () => {
  msg.value = "点击了刷新小图标";
};

const handleClick = () => {
  // 刷新
  block.value.refresh();
  msg.value = "";
};
const handleClose = () => {
  console.log("close");
};
onMounted(() => {
  for (let i = 1; i < 11; i++) {
    loginBackImageArr.value.push(
      new URL(`/src/assets/img/dragImage/{i}.png`, import.meta.url).href
    );
    // loginBackImageArr.value.push(import('@/assets/img/dragImage/' + i + '.png'))
  }
  handleClick();
});
</script>
<style lang="scss" scoped>
.dragDiv {
  margin-bottom: 20px;
  position: relative;
  .anticon-close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #999;
    font-size: 18px;
  }
  .header {
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    i {
      color: #276afe;
      cursor: pointer;
    }
  }
  :deep(.slide-verify-slider) {
    background: #fff8f8;
    border: none;
    border-radius: 20px;
    box-shadow: inset 1px 0px 4px 0px rgba(219, 37, 29, 0.4);
    color: #db251d;
    .slide-verify-slider-text {
      opacity: 0.8;
    }
    .icon-arrow-right:before {
      content: "";
    }
    .slide-verify-slider-mask {
      border: none;
      height: 40px;
      background: rgba(219, 37, 29, 0.3);
      border-radius: 20px 0 0 20px;
      border-right: 21px solid rgba(219, 37, 29, 0);
      box-sizing: content-box;
    }

    .slide-verify-slider-mask-item {
      border: none;
      background-color: #fff !important;
      top: -2px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      box-shadow: 0px 1px 4px 0px rgba(219, 37, 29, 0.2);
      .slide-verify-slider-mask-item-icon {
        width: 10px;
        height: 10px;
        background: none;
        top: 55%;
        left: 14px;
        transform: translateY(-14%) rotate(45deg);
        border-right: 1px solid #db251d;
        border-top: 1px solid #db251d;
      }
    }
  }
}
</style>
